﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>MPC-BE WebServer</title>
<script language="javascript" type="text/javascript">
function getXMLHTTP() {
	try {
		return new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
			return new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {}
	}
	if (typeof XMLHttpRequest != "undefined") {
		return new XMLHttpRequest();
	}
	return null;
}

function MakeRequest(req) {
	var httpRequest = getXMLHTTP();
	try {
		httpRequest.open("GET", req, true);
		httpRequest.send(null);
	} catch (e) {}
}

function urlencode(s) {
	if (encodeURIComponent) return encodeURIComponent(s);
	if (escape) return escape(s);
	return s; // whatever
}

function getOffsetX(m) {
	var x = m.offsetLeft;
	while (m.offsetParent) {
		x += (m = m.offsetParent).offsetLeft;
	}
	return x;
}
OnStatus = function (title, status, pos, posstr, dur, durstr, muted, volume, filepath) {
	var maxtitle = 70;
	if (title.length > maxtitle) title = title.substr(0, maxtitle - 3) + '...';
	var timestr = dur > 0 && posstr && durstr ? posstr + '&nbsp;/&nbsp;' + durstr : '&nbsp;';
	if (!dur || dur == 0) dur = 1;
	var sbpercent = Math.floor(100 * pos / dur);
	if (e = document.getElementById('title')) e.innerHTML = title;
	if (e = document.getElementById('seekbarchleft')) e.width = sbpercent > 0 ? sbpercent + '%' : '1px';
	if (e = document.getElementById('seekbarchright')) e.width = sbpercent < 100 ? (100 - sbpercent) + '%' : '1px';
	if ((e = document.getElementById('status')) && e.innerHTML != status) e.innerHTML = status;
	if ((e = document.getElementById('timer')) && e.innerHTML != timestr) e.innerHTML = timestr;
	if (e = document.getElementById('controlvolumemute')) {
		url = 'url(controlvolume' + (muted ? 'off' : 'on') + '.png)';
		if (e.style.backgroundImage != url) e.style.backgroundImage = url;
	}
	if (e = document.getElementById('controlvolumegrip')) {
		volume = (document.getElementById('controlvolumebar').offsetWidth - e.offsetWidth) * volume / 100;
		e.style.position = 'relative';
		e.style.top = '2px';
		e.style.left = Math.floor(volume) + 'px';
	}
}
var httpRequestStatus;

function OnReadyStateChange() {
	if (httpRequestStatus && httpRequestStatus.readyState == 4 && httpRequestStatus.responseText) {
		if (httpRequestStatus.responseText.charAt(0) != "<") {
			eval(httpRequestStatus.responseText.replace(/\\/g, '\\\\'));
		} else {
			alert(httpRequestStatus.responseText);
		}
		httpRequestStatus = null;
	}
}

function StatusLoop() {
	if (!httpRequestStatus || httpRequestStatus.readyState == 0) {
		httpRequestStatus = getXMLHTTP();
		try {
			httpRequestStatus.open("GET", 'status.html', true);
			httpRequestStatus.onreadystatechange = OnReadyStateChange;
			httpRequestStatus.send(null);
		} catch (e) {}
	}
	setTimeout("StatusLoop()", 500);
}
var snapshotcounter = 0;

function LoadSnapShot() {
	if (img = document.getElementById('snapshot')) {
		img.src = 'snapshot.jpg' + '?' + snapshotcounter++;
	}
}

function OnLoadSnapShot() {
	setTimeout("LoadSnapShot()", 5000);
}

function OnAbortErrorSnapShot(e) {
	setTimeout("LoadSnapShot()", 10000);
}

function OnSeek(e) {
	left = right = 0;
	if (sb = document.getElementById('seekbarchleft')) left = getOffsetX(sb);
	if (sb = document.getElementById('seekbarchright')) {
		right = getOffsetX(sb) + sb.offsetWidth;
	}
	if (sb = document.getElementById('seekbargrip')) {
		left += sb.offsetWidth / 2;
		right -= sb.offsetWidth / 2;
	}
	if (left > 0 && left < right) {
		percent = 100 * ((window.event ? window.event.clientX : e.clientX) - left) / (right - left);
		if (percent < 0) percent = 0;
		else if (percent > 100) percent = 100;
		MakeRequest('command.html?wm_command=[setposcommand]&percent=' + percent);
	}
}

function OnVolume(e) {
	left = right = 0;
	if (cv = document.getElementById('controlvolumebar')) {
		left = getOffsetX(cv) + 3;
		right = getOffsetX(cv) + cv.offsetWidth - 3;
	}
	if (left > 0 && left < right) {
		percent = 100 * ((window.event ? window.event.clientX : e.clientX) - left) / (right - left);
		if (percent < 0) percent = 0;
		else if (percent > 100) percent = 100;
		MakeRequest('command.html?wm_command=[setvolumecommand]&volume=' + percent);
	}
}

function OnCommand(id) {
	MakeRequest('command.html?wm_command=' + id);
}

function Init() {
	StatusLoop();
	LoadSnapShot();
	if (e = document.getElementById('seekbar')) e.onclick = OnSeek;
	if (e = document.getElementById('controlvolumebar')) e.onclick = OnVolume;
}
</script>
<style type="text/css">
img {
	padding: 0;
	margin: 0;
	border: 0;
}
#player {
	margin-left: auto;
	margin-right: auto;
}
#player td {
	font-family: Sans-Serif;
	font-size: 13px;
}
#header {
	width: 100%;
}
#header td {
	height: 30px;
}
#headericon {
	background-image: url(headericon.png);
	background-repeat: no-repeat;
	width: 22px;
}
#headerback {
	background-image: url(headerback.png);
	background-repeat: repeat-x;
	color: white;
	font-weight: bold;
	padding-top: 5px;
}
#headerclose {
	background-image: url(headerclose.png);
	background-repeat: no-repeat;
	width: 28px;
}
#title, #status, #posstr, #durstr {
	display: inline;
}
#menu td {
	font-family: Sans-Serif;
	font-size: 12px;
	padding: 1px 5px;
}
#menu, #controlbar {
	background-color: #ece6d4;
}
#statusbar td {
	font-family: Sans-Serif;
	font-size: 12px;
}
#video, #statusbar {
	background-color: black;
	color: white;
}
#video {
	padding: 1px;
	cursor: pointer;
}
#controlbar {
	background-image: url(controlback.png);
	background-repeat: repeat-x;
	height: 28px;
}
#controlbuttonplay {
	background-image: url(controlbuttonplay.png);
	background-repeat: no-repeat;
	width: 25px;
	height: 28px;
}
#controlbuttonpause {
	background-image: url(controlbuttonpause.png);
	background-repeat: no-repeat;
	width: 23px;
	height: 28px;
}
#controlbuttonstop {
	background-image: url(controlbuttonstop.png);
	background-repeat: no-repeat;
	width: 25px;
	height: 28px;
}
#controlbuttonskipback {
	background-image: url(controlbuttonskipback.png);
	background-repeat: no-repeat;
	width: 24px;
	height: 28px;
}
#controlbuttondecrate {
	background-image: url(controlbuttondecrate.png);
	background-repeat: no-repeat;
	width: 22px;
	height: 28px;
}
#controlbuttonincrate {
	background-image: url(controlbuttonincrate.png);
	background-repeat: no-repeat;
	width: 23px;
	height: 28px;
}
#controlbuttonskipforward {
	background-image: url(controlbuttonskipforward.png);
	background-repeat: no-repeat;
	width: 28px;
	height: 28px;
}
#controlbuttonstep {
	background-image: url(controlbuttonstep.png);
	background-repeat: no-repeat;
	width: 31px;
	height: 28px;
}
#controlvolumemute {
	background-image: url(controlvolumeon.png);
	background-repeat: no-repeat;
	width: 28px;
	height: 28px;
}
#controlvolumebar {
	background-image: url(controlvolumebar.png);
	background-repeat: no-repeat;
	width: 55px;
	height: 28px;
}
#seekbar {
	background-image: url(seekbarmid.png);
	background-repeat: repeat-x;
}
#seekbar td {
	height: 15px;
}
#center {
	width: 100%;
}
#leftside {
	background-image: url(leftside.png);
	background-repeat: repeat-y;
	width: 4px;
}
#rightside {
	background-image: url(rightside.png);
	background-repeat: repeat-y;
	width: 4px;
}
#leftbottomside {
	background-image: url(leftbottomside.png);
	background-repeat: repeat-x;
	width: 4px;
	height: 4px;
}
#bottomside {
	background-image: url(bottomside.png);
	background-repeat: repeat-x;
	height: 4px;
}
#rightbottomside {
	background-image: url(rightbottomside.png);
	background-repeat: repeat-x;
	width: 4px;
	height: 4px;
}
</style>
</head>
<body onload="Init()">
<div align="center">
	<table id="player" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<table id="header" cellpadding="0" cellspacing="0">
			<tr>
				<td id="headericon">
				</td>
				<td id="headerback">
					<div class="nobr" id="title">&nbsp;</div>
				</td>
				<td id="headerclose" onclick="OnCommand(816)">
				</td>
			</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td id="leftside">
		</td>
		<td>
			<table cellpadding="0" cellspacing="0" id="center">
			<tr>
				<td>
					<table id="menu" width="100%">
					<tr>
						<td>
							File
						</td>
						<td>
							View
						</td>
						<td>
							Play
						</td>
						<td>
							Navigate
						</td>
						<td>
							Favorites
						</td>
						<td width="100%" align="right">
							Help
						</td>
					</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td id="video" align="center" onclick="OnCommand(889)">
					<img src="snapshot.png" alt="snapshot" id="snapshot" onload="OnLoadSnapShot()" onabort="OnAbortErrorSnapShot()" onerror="OnAbortErrorSnapShot()">
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" id="seekbar" cellpadding="0" cellspacing="0">
					<tr>
						<td id="seekbarleft">
							<img src="seekbarleft.png" alt="seekbarleft">
						</td>
						<td id="seekbarchleft" width="0%">
						</td>
						<td id="seekbargrip">
							<img src="seekbargrip.png" alt="seekbargrip">
						</td>
						<td id="seekbarchright" width="100%">
						</td>
						<td id="seekbarright">
							<img src="seekbarright.png" alt="seekbarright">
						</td>
					</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" cellpadding="0" cellspacing="0" id="controlbar">
					<tr>
						<td id="controlbuttonplay" onclick="OnCommand(887)"></td>
						<td id="controlbuttonpause" onclick="OnCommand(888)"></td>
						<td id="controlbuttonstop" onclick="OnCommand(890)"></td>
						<td id="controlbuttonskipback" onclick="OnCommand(920)"></td>
						<td id="controlbuttondecrate" onclick="OnCommand(894)"></td>
						<td id="controlbuttonincrate" onclick="OnCommand(895)"></td>
						<td id="controlbuttonskipforward" onclick="OnCommand(921)"></td>
						<td id="controlbuttonstep" onclick="OnCommand(891)"></td>
						<td>&nbsp;</td>
						<td id="controlvolumemute" onclick="OnCommand(909)"></td>
						<td id="controlvolumebar" valign="top">
							<img src="controlvolumegrip.png" id="controlvolumegrip" alt="control volume grip">
						</td>
					</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" id="statusbar">
					<tr>
						<td>
							<div id="status"></div>
						</td>
						<td align="right">
							<div id="timer">&nbsp;</div>
						</td>
					</tr>
					</table>
				</td>
			</tr>
			</table>
		</td>
		<td id="rightside"></td>
	</tr>
	<tr>
		<td id="leftbottomside"></td>
		<td id="bottomside"></td>
		<td id="rightbottomside"></td>
	</tr>
	</table>
</div>
</body>
</html>
